<template>
  <view class="content">
    <view class="row b-b">
      <text class="tit">姓名</text>
      <input class="input" type="text" v-model="addressData.username" placeholder="请输入姓名"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">身份证</text>
      <input class="input" type="text" v-model="addressData.SFZ" placeholder="请输入身份证" placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">手机号</text>
      <input class="input" type="number" v-model="addressData.userTel" placeholder="请输入手机号码"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">性别</text>
      <input class="input" type="text" v-model="addressData.sex" placeholder="请输入性别" placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">ID</text>
      <input class="input" type="text" v-model="addressData.id" placeholder="请输入ID" disabled="true"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">密码</text>
      <input class="input" type="text" v-model="addressData.password" placeholder="请输入密码"
        placeholder-class="placeholder" />
    </view>
    <button class="add-btn" @click="confirm">提交</button>
    <view class="uniappDemo">
      <!-- 弹框内容 -->
      <view class="uniappBox">
        <view :hidden="!uniappShowModel" class="uniappContant">
          <view class="uniappTitle">提示</view>
          <view class="uniappNotice">{{message}}</view>
          <!-- 确定取消按钮 -->
          <view class="uniappBtn">

            <view @tap="confirm2()">确定</view>
          </view>
        </view>
        <!-- 背景黑色蒙版 -->
        <view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
      </view>

    </view>
  </view>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  export default {
    data() {
      return {
        uniappShowModel: false, //默认不显示
        addressData: {
          username: '',
          SFZ: '',
          userTel: '',
          sex: '',
          id: '',
          password: '',
        },
        message: '', //保留提示信息
        status: '' //判断是否成功修改
      }
    },
    onLoad(option) {
      this.addressData.username = store.state.user.User_Name
      this.addressData.SFZ = store.state.user.User_SFZ
      this.addressData.userTel = store.state.user.User_Tel
      this.addressData.id = store.state.user.User_ID
      this.addressData.password = store.state.user.User_Password
      this.addressData.sex = store.state.user.User_Sex
    },
    methods: {
      //提交 按钮
      confirm() {
        let data = this.addressData

        console.log(JSON.stringify(data))

        this.updateUser()
        // this.uniappShowModel = true //显示模态框
      },
      // 修改用户信息
      async updateUser() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/updateUser',
          method: 'post',
          data: {
            username: this.addressData.username,
            userTel: this.addressData.userTel,
            SFZ: this.addressData.SFZ,
            sex: this.addressData.sex,
            id: this.addressData.id,
            password: this.addressData.password
          },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        })
        this.status = res.status
        // 修改失败
        if (res.status === 1) {
          console.log(res.message)
          this.message = res.message
          this.uniappShowModel = true
        }
        // 修改成功 调回上一个界面
        if (res.status === 0) {
          this.message = res.message
          // 修改store中存储的数据
          const { data: res2 } = await uni.request({
            url: 'http://localhost:3007/api/login',
            method: 'POST',
            header: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: {
              username: this.addressData.username,
              password: this.addressData.password,
            }
          })
          console.log(res2)
          if (res2.status === 0) {
            store.commit('loginUser', res2.data.user)
          }
          this.uniappShowModel = true
        }
      },

      // 点击确定按钮模态框消失
      confirm2() {
        // 修改成功 模态框隐藏并路由跳转
        if (this.status === 0) {
          uni.switchTab({
            // 跳转到tabBar页面不能带参数?date=
            url: '/pages/my/my'
          })
        }
        this.uniappShowModel = false

      },
    },
  }
</script>

<style lang="scss">
  page {
    padding-top: 16upx;
  }

  .row {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 30upx;
    height: 110upx;
    background: #fff;

    .tit {
      flex-shrink: 0;
      width: 120upx;
      font-size: 30upx;

    }

    .input {
      flex: 1;
      font-size: 30upx;

    }

    .icon-shouhuodizhi {
      font-size: 36upx;

    }
  }

  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690upx;
    height: 80upx;
    margin: 60upx auto;
    background-color: rgb(28, 42, 134);
    color: #fff;

    border-radius: 10upx;
    box-shadow: 1px 2px 5px rgba(28, 42, 134, 0.4);
  }

  .uniappBgdCol {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99;
    -moz-opacity: 0.6;
    opacity: .6;
    filter: alpha(opacity=88);
  }

  .uniappContant {
    position: fixed;
    top: 36%;
    left: 50%;
    width: 80%;
    margin-left: -40%;
    background-color: white;
    z-index: 100;
    border-radius: 10rpx;
  }

  .uniappTitle {
    display: flex;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #161303;
    font-size: 28rpx;
    padding: 20rpx 0rpx;
    border-bottom: 2rpx solid #EEEEEE;
    ;
  }

  .uniappNotice {
    font-size: 28rpx;
    color: #121212;
    display: flex;
    justify-content: center;
    padding: 40rpx 0rpx;
  }

  .uniappBtn {
    display: flex;
    justify-content: space-between;
  }

  .uniappBtn view {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4% 0%;
    font-size: 28rpx;
  }

  .uniappBtn view:first-child {
    background-color: rgb(254, 250, 230);
    border-radius: 0rpx 0rpx 0rpx 10rpx;
  }

  .uniappBtn view:last-child {
    background-color: rgb(254, 209, 10);
    border-radius: 0rpx 0rpx 10rpx 0rpx;
  }
</style>